<template>
  <layout-body>
    <el-button
      type="primary"
      @click="createClick(0)"
      v-permission="'system-admin-create'"
      >添加管理员</el-button
    >

    <!-- 列表 -->
    <el-table
      v-loading="initLoading"
      class="mt20"
      :data="lists"
      row-key="id"
    >
      <el-table-column label="账号" prop="account" min-width="100px">
        <template #default="scope">
          <div class="admin-box">
            <el-avatar shape="square" :size="30" :src="scope.row.avatar" />
            <div class="ml10">
              <div>{{ scope.row.account }}</div>
              <div>{{ scope.row.real_name }}</div>
            </div>
            <el-tag :hit="true" :disable-transitions="true" class="ml10" v-if="!scope.row.level">超级管理员</el-tag >
          </div>
        </template></el-table-column
      >
      <el-table-column
        label="登录次数"
        align="center"
        prop="login_count"
        width="100px"
      >
        <template #default="scope">
          <div>{{ scope.row.login_count }}</div>
        </template></el-table-column
      >
      <el-table-column
        label="最后一次登录时间"
        align="center"
        prop="last_time"
        width="160px"
      >
        <template #default="scope">
          <div class="text-grey">{{ scope.row.last_time }}</div>
        </template></el-table-column
      >
      <el-table-column
        label="最后一次登录IP"
        align="center"
        prop="last_ip"
        width="140px"
      >
        <template #default="scope">
          <div>{{ scope.row.last_ip }}</div>
        </template></el-table-column
      >
      <el-table-column label="状态" prop="status" align="center" width="120px">
        <template #default="scope">
          <el-switch
            v-model="scope.row.status.value"
            size="small"
            :active-value="1"
            :inactive-value="0"
            :loading="scope.row.loading"
            :disabled="!scope.row.level"
            :before-change="
              () => {
                return (scope.row.switch = true);
              }
            "
            @change="statusChange($event, scope.row)"
          />
        </template>
      </el-table-column>
      <el-table-column align="left" label="操作" width="120">
        <template #default="scope">
          <el-button
            v-if="scope.row.level || adminInfo.id == scope.row.id"
            link
            type="primary"
            @click="createClick(scope.row.id)"
            v-permission="'system-admin-update'"
            >编辑</el-button
          >
          <el-popconfirm
            confirm-button-text="确定"
            cancel-button-text="不用了"
            icon="WarningFilled"
            icon-color="red"
            title="确定删除吗？"
            @confirm="del(scope.row.id)"
            v-if="scope.row.level"
          >
            <template #reference>
              <el-button link v-permission="'system-admin-delete'" type="primary">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="flex end">
      <page :listPage="listPage" @change="pageChange"></page>
    </div>
    <!-- 添加 -->
    <systemAdminCreate
      ref="createComponentRef"
      @success="toInit()"
    ></systemAdminCreate>
  </layout-body>
</template>
<script lang="ts" setup>
import { onMounted, ref, getCurrentInstance,ComponentInternalInstance } from "vue";
import { getList,updateStatus,delAdmin } from "@/api/system/admin";
import systemAdminCreate from "./create.vue";
import { listPageType, Result, ResultError } from "@/types";
import { useAdmin ,useConfig} from "@/store";

const { proxy } = getCurrentInstance() as any

const {
  proxy: { $utils },
} = getCurrentInstance() as any;

const adminStore = useAdmin();

const adminInfo = adminStore.curAdmin;

const configStore = useConfig();

const initLoading = ref(true);

const createComponentRef = ref<HTMLElement>();

const lists = ref([]);

const toInit = () => {
  let obj: any = {};
  obj.page = listPage.value.page;
  obj.limit = listPage.value.limit;
  initLoading.value = true;
  getList(obj)
    .then((res:Result) => {
      initLoading.value = false;
      lists.value = res.data.data;
      listPage.value.total = res.data.total;

      setTimeout(() => {
        initLoading.value = false;
      }, 300);
    })
    .catch((error) => {});
};

const createClick = (id:number | string) => {
  proxy?.$refs['createComponentRef']?.open(id);
}

const listPage = ref<any>({
  total: 0,
  limit: configStore.getPageLimit,
  page: 1,
});

const pageChange = (res: listPageType) => {
  listPage.value = res;
  toInit();
};

const del = (id:number | string) => {
  delAdmin({id})
    .then((res:Result) => {
      toInit();
      $utils.successMsg(res.message);
    })
    .catch((err: ResultError) => {
      $utils.errorMsg(err);
    });
}


const statusChange = (val: any, row: any) => {
  if (row.switch === true) {
    row.loading = true;
    updateStatus( {
      id:row.id,
      status: val,
    })
      .then((res:Result) => {
        row.loading = false;
        toInit();
        $utils.successMsg(res);
      })
      .catch((err: ResultError) => {
        row.loading = false;
        toInit();
        $utils.errorMsg(err);
      });
  }
};

onMounted(() => {
  toInit();
});
</script>
<style scoped>
.admin-box {
  display: flex;
  align-items: center;
}
</style>
